<template>
    <div class="login">
        <div>
            <div>
                <label for="username">账号：</label>
                <el-input v-model="username" placeholder="请输入用户名" name='username' @keyup.enter.native='login'></el-input>
            </div>
            <div>
                <label for="password">密码：</label>
                <el-input v-model="password" placeholder="请输入密码" name='passsword' type='password' @keyup.enter.native='login' show-password>
                </el-input>
            </div>
            <el-button type="success" @click="regist">注册</el-button>
            <el-button type="primary" @click="login">登录</el-button>
            <div style="margin-top: 10px;text-align: center;">
                <span @click="toAdmin" style="-margin-left: 30px;font-size: 14px;">进入后台管理</span>
            </div>
        </div>
        <el-dialog title="注册" :visible.sync="dialogVisible" width="97%" append-to-body>
            <div style="text-align:center">
                <label for="username1">账号：</label>
                <el-input v-model="username1" placeholder="请输入用户名" style="width:70%;margin:10px 5px" @keyup.enter.native='submitRegist'
                    name='username1'></el-input>
            </div>
            <div style="text-align:center">
                <label for="password1">密码：</label>
                <el-input v-model="password1" placeholder="请输入密码" type='password' show-password @keyup.enter.native='submitRegist'
                    style="width:70%;margin:10px 5px" name='passsword1'>
                </el-input>
            </div>
            <div slot="footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitRegist">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">

import { mapState } from 'vuex'
export default {
    name: 'login-vue',
    components: {
    },

    props: {},

    data() {
        return {
            username: "",
            password: "",
            username1: "",
            password1: "",
            dialogVisible: false
        }
    },

    watch: {

    },

    created() {
    },

    computed: {
        ...mapState(['isShowHeader'])
    },

    mounted() {
        // console.log(this.isShowHeader)
        this.$nextTick(() => {
            if (this.isShowHeader === false) {
                this.username = localStorage.getItem('username') || '';
                this.password = localStorage.getItem('password') || '';
            }
        })
    },

    methods: {
        toAdmin() {
            this.$router.push('/mgr/login')
        },
        login() {
            if (!this.username || !this.password) return this.$msg.warning({
                message: "账号或者密码不能为空",
                showClose: true,
                duration: 1000
            });
            this.$http.get('/login', {
                username: this.username,
                password: this.password,
            }).then((res) => {
                console.log(res, '登录')
                // const { username, name, avator, sex, age, sign } = res || {};
                this.$msg.success({
                    message: "登录成功",
                    showClose: true,
                    duration: 1000
                });
                // localStorage.setItem('username', username);
                // localStorage.setItem('name', name);
                // localStorage.setItem('avator', avator);
                // localStorage.setItem('sex', sex);
                // localStorage.setItem('sign', sign || '');
                // localStorage.setItem('age', age || '');
                // localStorage.setItem('password', this.password);
                for(let i in res) {
                    localStorage.setItem(i,res[i]);
                    console.log(i,'===',res[i])
                }
                this.$store.commit('setKeepList', ['home', 'login', 'modify', 'my']);

                this.$router.replace("/home");
                // this.dialogVisible = false;
            }).catch((err) => { err })
        },
        regist() {
            this.dialogVisible = true;
        },
        submitRegist() {

            if (!this.username1 || !this.password1) return this.$msg.warning({
                message: "账号或者密码不能为空",
                showClose: true,
                duration: 1000
            });
            this.$http.get('/register', {
                username: this.username1,
                password: this.password1,
            }).then((res) => {
                this.username = res[0].username;
                this.password = res[0].password;
                this.$msg.success({
                    message: "注册成功",
                    showClose: true,
                    duration: 1000
                });
                this.dialogVisible = false;
                this.username1 = '';
                this.password1 = '';
            }).catch(err => err)
        }
    }
}
</script>

<style lang="less" scoped>
.login {
    width: 100%;
    height: 100%;
    position: relative;
    background: url('https://img1.baidu.com/it/u=4049022245,514596079&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500');
    background-size: cover;
    > div {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
    }
    div {
        width: 100%;
    }
    .el-input {
        width: 250px;
        margin: 10px 5px;
        display: inline-block;
    }
    .el-button {
        margin: 5px;
    }
}
</style>